<template>
  <button
    class="custom-button"
    :class="[
      type ? `custom-button-${type}` : '',
      size ? `custom-button-${size}` : '',
      shape ? `custom-button-${shape}` : '',
      { 'custom-button-block': block },
      { 'custom-button-disabled': disabled }
    ]"
    :style="{
      backgroundColor: bgColor,
      color: color,
      borderColor: borderColor,
      borderRadius: borderRadius,
      margin: margin,
      width: width
    }"
    :disabled="disabled"
    @click="handleClick"
  >
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'default' // default, primary, success, warning, danger, white
  },
  size: {
    type: String,
    default: 'medium' // small, medium, large
  },
  shape: {
    type: String,
    default: 'square' // square, round, circle
  },
  bgColor: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: ''
  },
  borderColor: {
    type: String,
    default: ''
  },
  borderRadius: {
    type: String,
    default: ''
  },
  margin: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: ''
  },
  block: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])

const handleClick = (event: Event) => {
  if (!props.disabled) {
    emit('click', event)
  }
}
</script>

<style lang="scss">
.custom-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.3s;
  user-select: none;
  touch-action: manipulation;
  height: 44px;
  padding: 0 15px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.85);

  &-block {
    display: block;
    width: 100%;
  }

  &-disabled {
    cursor: not-allowed;
    opacity: 0.65;
  }

  // Types
  &-primary {
    background-color: #1890ff;
    border-color: #1890ff;
    color: #fff;
  }

  &-success {
    background-color: #52c41a;
    border-color: #52c41a;
    color: #fff;
  }

  &-warning {
    background-color: #faad14;
    border-color: #faad14;
    color: #fff;
  }

  &-danger {
    background-color: #ff4d4f;
    border-color: #ff4d4f;
    color: #fff;
  }

  &-white {
    background-color: #fff;
    border-color: #d9d9d9;
    color: rgba(0, 0, 0, 0.85);
  }

  // Sizes
  &-small {
    height: 32px;
    padding: 0 12px;
    font-size: 14px;
  }

  &-large {
    height: 48px;
    padding: 0 20px;
    font-size: 18px;
  }

  // Shapes
  &-round {
    border-radius: 22px;
  }

  &-circle {
    border-radius: 50%;
    padding: 0;
    width: 44px;
  }
}
</style> 